<template>
  <section>
    <head-top :crossover="gropname">
      <section class="coversPart" slot="person">
        <router-link to='/groupchat/groupchatmessage' class="person_link">
          <svg fill="#fff" class="icon-search">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#doubleperson"></use>
          </svg>
        </router-link>
      </section>
    </head-top>
    <section class="coversation" ref="groupHeight" @touchmove='loadMore'>
      <section class="coversationlist">
        <ul>
          <!--  群聊-->
          <li v-for="(item, i) in groupconversine" :key="i">
            <div class="other" :class="{mysay : item.user_id == userInfo.id }">
              <div class="say-time">{{item.time}}</div>
              <img :src="item.avatar" alt="" @click="enlargeImg(item.avatar)">
              <div class="whatsay">

                <div class="whatsay_svg">
                  <svg>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="item.user_id == userInfo.id ? '#trigon-right' : '#trigon-left'"></use>
                  </svg>
                </div>
                <div class="whatsay_text" v-if="item.content.includes(';base64,')">
                  <img :src="item.content" alt="链接失效">
                </div>
                <div class="whatsay_text" v-else-if="item.content.includes('emoji')">
                  <img :src="item.content.replace('emoji', '')" alt="链接失效">
                </div>
                <div class="whatsay_text" v-else v-html="item.content"></div>
              </div>
            </div>
          </li>
        </ul>
        <div class="underscore" v-if="underscore">————&nbsp;我是有底线的&nbsp;————</div>
      </section>
    </section>
    <div class="load" v-if="loadStatus">
      <div class="loadnbg"></div>
      <div class="loading">
        <div class="spinner">
          <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
          </div>
          <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
          </div>
          <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
          </div>
        </div>
      </div>
    </div>
    <footer :class=" {footshow : clickmore}">
      <section class="foot_top">
        <div>
          <svg>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#voice"></use>
          </svg>
        </div>
        <div>
          <input type="text" v-model="inputmessage" maxlength="100" @input="whatInput" @click="inputBottomHide" :class="{lightborder : light}" @keyup.enter="enterThing">
        </div>
        <div>
          <svg @click="bottomShow('face')">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#face"></use>
          </svg>
        </div>
        <div>
          <div class="send" v-if="light" @click="clickSend">
            <span>发送</span>
          </div>
          <svg v-else @click="bottomShow('add')">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#addthing"></use>
          </svg>
        </div>
      </section>
      <section class="foot_bottom">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-if="!isFace" v-for="(value,item) in chatData" :key="item">
              <ul class="clear">
                <li v-for="(value, index) in value" :key="index">
                  <div class="swiper_svg">
                    <svg fill="#7a8187">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="value.chatSvgid"></use>
                    </svg>
                  </div>
                  <div class="swiper_text">
                    {{value.chatSvgname}}
                  </div>
                  <input v-if="value.chatSvgname == '相册'" type="file" @change="chatSvgname" class="album">
                </li>
              </ul>
            </div>
            <div class="swiper-slide" v-if="isFace" v-for="(values,item) in emoji" :key="item">
              <ul class="clear">
                <li v-for="(value, index) in values" :key="index" @click="sendEmoji(value.src)">
                  <div class="swiper_svg">
                    <img :src="value.src" alt="...">
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </section>
    </footer>
    <section class="enlarge" v-if="enlarge" @click="enlargeHide" :class="{'movein-animate' : enlargeShow, 'moveout-animate-leave' : enlargehides}">
      <img :src="imgurl + enlargeurl" alt="">
    </section>
    <transition name="router-show">
      <router-view></router-view>
    </transition>
  </section>

</template>

<script>
import headTop from "src/components/header/head";
import { mapState, mapActions, mapMutations } from "vuex";
import { groupChat, chatData, getHistory } from "src/service/getData";
import emoji from "src/service/data/emoji";
import { imgurl } from "src/config/env";
import "src/config/swiper.min.js";
import "src/style/swiper.min.css";
import fetch from "src/config/fetch";
export default {
  data() {
    return {
      inputmessage: "", //输入的文本内容
      light: false, //输入框不为空时，input下边框变色
      clickmore: false, //点击加号底部显示、隐藏
      gropname: "", //聊天名字
      ifme: false, //发消息的对象是否是自己
      enlargeurl: "", //头像地址
      enlargehides: false,
      enlargeShow: false,
      enlarge: false,
      timer: null,
      groupconversine: [], //对话列表
      offset: 0,
      imgS: "",
      scroll: "",
      isFace: false, //加载
      loadStatus: false, //加载
      underscore: false, //底线
      chatData: {},
      imgurl,
      emoji,
      userId: "",
      allgroups: [] //所有群聊信息
    };
  },
  created() {},
  mounted() {
    socket.on("enterGroup", msg => {
      this.DIALOG_COVER(msg);
    });

    console.log("groupchat");
    socket.emit("enterGroup", {
      name: this.userInfo.remarkes ? this.userInfo.remarkes : this.userInfo.name
    });
    this.getUserInfo();
    this.groupList(this.offset);
    this.loadStatus = true;
    groupChat().then(res => {
      this.gropname = res.petname;
    });
    // 底部功能区
    chatData()
      .then(res => {
        this.chatData = res;
      })
      .then(() => {
        //初始化swiper
        new Swiper(".swiper-container", {
          pagination: ".swiper-pagination",
          loop: false
        });
      });
  },
  components: {
    headTop
  },
  computed: {
    ...mapState(["infor", "userInfo", "allgroup", "groupInfo", "unreadG"])
  },
  watch: {
    unreadG: {
      immediate: true,
      handler: function(val) {
        val.forEach((data, index) => {
          if (data.room_id == this.groupInfo.id) {
            this.groupconversine.push(data);
            this.$nextTick(() => {
              window.scrollTo(
                0,
                this.$refs.groupHeight.offsetHeight - window.innerHeight
              );
            });
            val.splice(index, 1);
            this.CHANGE_UNREADG([...val]);
          }
        });
      }
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    socket.emit("removeGroup", {
      name: this.userInfo.remarkes ? this.userInfo.remarkes : this.userInfo.name
    });
    // socket.removeAllListeners();
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    ...mapMutations(["GET_ALLGROUP", "DIALOG_COVER", "CHANGE_UNREADG"]),

    async groupList(offset) {
      const groupData = await getHistory({
        offset: this.offset,
        limit: 20,
        room_id: this.groupInfo.id
      });
      if (groupData.status == 200) {
        if (groupData.history.length < 20) {
          this.underscore = true;
        }
        if (groupData.history.length == 0) {
          this.loadStatus = false;
          return;
        }
        for (let i = 0; i < groupData.history.length; i++) {
          if (!groupData.history[i].content) {
            //清空 空 数据
            groupData.history.splice(i, 1);
            i = i - 1;
          }
        }
        this.groupconversine = [...groupData.history, ...this.groupconversine];
        this.allgroups = [...this.groupconversine];
        Array.prototype.unique = function() {
          //数组去重
          var res = [this[0]];
          for (var l = 1; l < this.length; l++) {
            var repeat = false;
            for (var j = 0; j < res.length; j++) {
              if (this[l].user_id == res[j].user_id) {
                repeat = true;
                break;
              }
            }
            if (!repeat) {
              res.push(this[l]);
            }
          }
          return res;
        };
        var arr = this.allgroups;
        this.GET_ALLGROUP(arr.unique()); //保存所有人数据信息
      } else {
        this.DIALOG_COVER(res.message);
      }
      this.$nextTick(() => {
        this.loadStatus = false;
        if (offset == 0) {
          // this.underscore = false;
          window.scrollTo(
            0,
            this.$refs.groupHeight.offsetHeight - window.innerHeight
          );
        } else {
          const scrollPosition =
            this.$refs.groupHeight.offsetHeight - this.lastPageHeight;
          window.scrollTo(0, scrollPosition);
        }
        this.lastPageHeight = this.$refs.groupHeight.offsetHeight;
      });
    },
    loadMore() {
      if (this.loadStatus || this.underscore) {
        return;
      }
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scroll == 0) {
        this.loadStatus = true;
        this.offset += 20;
        this.groupList(this.offset);
      } else {
        this.underscore = false;
        this.loadStatus = false;
      }
    },
    whatInput() {
      if (this.inputmessage.replace(/\s+/g, "") == "") {
        this.light = false;
      } else {
        this.light = true;
      }
    },
    enterThing() {
      if (this.light) {
        this.clickSend();
      }
    },
    bottomShow(type) {
      this.clickmore = true;
      this.isFace = type == "face";
    },
    bottomHide() {
      this.clickmore = false;
    },
    inputBottomHide() {
      this.clickmore = false;
    },
    async clickSend() {
      if (!this.inputmessage) return;
      socket.emit("groupchat", {
        room_id: this.groupInfo.id,
        user_id: this.userInfo.id,
        content: this.inputmessage
      });
      this.inputmessage = "";
      this.light = false;
      this.$nextTick(() => {
        window.scrollTo(
          0,
          this.$refs.groupHeight.offsetHeight - window.innerHeight
        );
      });
    },
    enlargeImg(enlargeImg) {
      this.enlargeurl = enlargeImg;
      this.enlarge = true;
      this.enlargeShow = true;
      this.enlargehides = false;
    },
    enlargeHide() {
      clearTimeout(this.timer);
      this.enlargehides = true;
      this.enlargeShow = false;
      this.timer = setTimeout(() => {
        this.enlarge = false;
      }, 400);
    },
    // 发送表情
    chatSvgname(event) {
      let that = event.target;
      let file = that.files[0],
        reader = new FileReader();
      if (!reader) {
        that.DIALOG_COVER("!your browser doesn't support fileReader");
        that.value = "";
        return;
      }
      reader.onload = e => {
        //读取成功，显示到页面并发送到服务器
        that.value = "";
        console.log(e.target.result.length);
        if (!e.target.result) return;
        socket.emit("groupchat", {
          room_id: this.groupInfo.id,
          user_id: this.userInfo.id,
          content: e.target.result
        });
        this.light = false;
        this.$nextTick(() => {
          window.scrollTo(
            0,
            this.$refs.groupHeight.offsetHeight - window.innerHeight
          );
        });
      };
      reader.readAsDataURL(file);
    },
    // 发送兔斯基
    sendEmoji(src) {
      console.log(src);
      socket.emit("groupchat", {
        room_id: this.groupInfo.id,
        user_id: this.userInfo.id,
        content: 'emoji' + src
      });
      this.light = false;
      this.$nextTick(() => {
        window.scrollTo(
          0,
          this.$refs.groupHeight.offsetHeight - window.innerHeight
        );
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "src/style/public";
.router-show-enter-active,
.router-show-leave-active {
  transition: all 0.4s;
}
.router-show-enter,
.router-show-leave-active {
  transform: translateX(100%);
}

.load {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  .loadnbg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: #000;
    opacity: 0;
  }
  .loading {
    display: block;
    @include center;
  }
}
.spinner {
  width: 80px;
  height: 80px;
  position: relative;
}

.container1 > div,
.container2 > div,
.container3 > div {
  width: 16px;
  height: 16px;
  background-color: #46c01b;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1s infinite ease-in-out;
  animation: bouncedelay 1s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 {
  top: 0;
  left: 0;
}
.circle2 {
  top: 0;
  right: 0;
}
.circle3 {
  right: 0;
  bottom: 0;
}
.circle4 {
  left: 0;
  bottom: 0;
}

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
.coversPart {
  @include topcenter;
  right: 0.5973333333rem;
  @include widthHeight(0.8533333333rem, 0.8533333333rem);
  .person_link {
    display: block;
    @include widthHeight(0.8533333333rem, 0.8533333333rem);
    svg {
      @include widthHeight(100%, 100%);
    }
  }
}
.coversation {
  background-color: #ebebeb;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  padding-top: 2.06933rem;
  .coversationlist {
    position: relative;
    padding: 0 0.32rem;
    padding-bottom: 2.6rem;
    overflow: auto;
    margin: 0 auto;
    ul {
      padding-top: 0.4rem;
      width: 15.4rem;
      overflow-x: hidden;
      overflow-scrolling: touch;
      -webkit-overflow-scrolling: touch;
      top: 0;
      li {
        .other {
          width: 100%;
          @include justify(flex-start);
          margin-bottom: 1.3rem;
          align-items: top;
          position: relative;
          .say-time {
            @include sizeColor(0.48rem, #999);
            width: 8rem;
            position: absolute;
            top: -0.4rem;
            left: 2.5rem;
          }
          img {
            display: block;
            @include widthHeight(1.7493333333rem, 1.7493333333rem);
          }
          .whatsay {
            position: relative;
            margin-top: 0.4rem;

            .whatsay_svg {
              @include widthHeight(0.4266666667rem, 0.64rem);
              position: absolute;
              top: 0.5546667rem;
              left: 0.36rem;
              z-index: 2;
              svg {
                display: block;
                @include widthHeight(0.4266666667rem, 0.64rem);
              }
            }
            .whatsay_text {
              margin-left: 0.6399997rem;
              max-width: 10.3253333333rem;
              background: #fff;
              padding: 0.42rem 0.384rem;
              border: 1px solid #d9d9d9;
              border-radius: 8px;
              @include sizeColor(0.64rem, #333);
              line-height: 0.8533333333rem;
              word-break: break-all;
              img {
                max-width: 100%;
                max-height: 50vh;
              }
            }
          }
        }
        .mysay {
          display: flex;
          flex-direction: row-reverse;
          .say-time {
            left: 8.8rem;
          }
          .whatsay {
            .whatsay_svg {
              right: 0.36rem;
              left: auto;
            }
            .whatsay_text {
              margin-right: 0.6399997rem;
              margin-left: 0;
              background: #9fe658;
            }
          }
        }
      }
    }
    .underscore {
      padding-top: 0.2rem;
      text-align: center;
      @include sizeColor(0.5546666667rem, #999);
    }
  }
}
footer {
  position: fixed;
  z-index: 10;
  border-top: 1px solid #e0e0e0;
  background: #f5f5f5;
  bottom: -11.712rem;
  width: 100%;
  .foot_top {
    padding: 0 0.512rem;
    height: 2.0053333333rem;
    background: #f3f3f3;
    @include justify(flex-start);
    align-items: center;
    div:nth-of-type(1),
    div:nth-of-type(3),
    div:nth-of-type(4) {
      @include widthHeight(1.3653333333rem, 1.3653333333rem);
      margin-right: 0.3413333333rem;
      svg {
        @include widthHeight(100%, 100%);
      }
    }
    div:nth-of-type(2) {
      margin-right: 0.3413333333rem;
      width: 9.8rem;
      height: 1.152rem;
      border-bottom: 1px solid #e0e0e0;
      input {
        display: block;
        width: 9.8rem;
        padding: 0 0.4133333333rem;
        line-height: 1.152rem;
        height: 1.152rem;
        border: 0;
        background: none;
        @include sizeColor(0.64rem, #000);
        border-bottom: 1px solid #e0e0e0;
      }
      .lightborder {
        border-color: #19ad17;
      }
    }
    div:nth-of-type(4) {
      margin-right: 0;
      .send {
        width: 1.8133333333rem;
        background: #16af17;
        height: 1.3653333333rem;
        padding: 0.682666rem 0;
        border-radius: 5px;
        @include justify(center);
        align-items: center;
        span {
          display: block;
          @include sizeColor(0.5973333333rem, #fff);
        }
      }
      .send:active {
        background: #33c034;
      }
    }
  }
  .foot_bottom {
    height: 11.712rem;
    border-top: 1px solid #e0e0e0;
    .swiper-container {
      width: 100%;
      height: 11.712rem;
      overflow: hidden;
      .swiper-slide {
        width: 100%;
        ul {
          padding: 1.408rem 1.1946666667rem 0;
          box-sizing: border-box;
          li {
            position: relative;
            float: left;
            width: 2.5466666667rem;
            margin-right: 1rem;
            margin-bottom: 1.1946666667rem;
            .swiper_svg {
              @include widthHeight(2.5466666667rem, 2.5466666667rem);
              background: #fcfcfc;
              border: 1px solid #d3d3d3;
              border-radius: 10px;
              @include justify(center);
              align-items: center;
              svg {
                @include widthHeight(1.28rem, 0.9386666667rem);
                display: block;
              }
            }
            .swiper_text {
              width: 100%;
              margin-top: 0.256rem;
              text-align: center;
              @include sizeColor(0.4693333333rem, #7a8187);
            }
            .album {
              position: absolute;
              top: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
            }
          }
          li:nth-of-type(4n + 4) {
            margin-right: 0;
          }
        }
      }
    }
  }
}
.footshow {
  bottom: 0;
  transition: all 0.2s;
}
.enlarge {
  position: fixed;
  @include widthHeight(100%, 100%);
  background: #000000;
  top: 0;
  z-index: 100;
  img {
    display: block;
    width: auto;
    height: 15.0186666667rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -7.5093333333rem;
  }
}
.enlarge_part {
  display: none;
}
body .movein-animate {
  transition: all 1s;
  animation: fadeIn 0.6s;
}
body .moveout-animate-leave {
  transition: all 1s;
  animation: zoomOut 0.6s;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 0;
  }
}
</style>
